﻿<template>
  <div class="Adventure_user_index" ref ="el">
    <div class="fix_header_wrapper">
      <div class="new_ad_header">
        <img src="../../static/img/new_style_go_back.png" alt="">
        <span class="maxc_n">
        冒险卡
      </span>
        <span class="header_btn_new_ad">
        写限定卡
      </span>
      </div>
      <div class="new_ad_nav clearfix" v-on:touchstart="nav_act($event)">
        <div class="nav_act">
          校友卡
        </div>
        <div>
          热门卡
        </div>
        <div>
          限定卡
        </div>
        <div>
          辅助卡
        </div>
      </div>
    </div>

    <div class="cover_main" :style="{height:wrapperHeight +'px'}"  ref="wrapper">
      <mt-loadmore :bottom-method="loadBottom" @bottom-status-change="handleBottomChange"
                   :bottom-all-loaded="allLoaded" ref="loadmore" :top-method="loadTop"
                   @translate-change="translateChange"
                   @top-status-change="handleTopChange">

        <ul class="page-loadmore-list clearfix" ref="ul_list">
          <!--校友卡s-->
          <li v-for="item in list" class="xyk_cover" v-show="show_list[0]">
            <ul class="xyk_tips hide">
              <li>
                加好友
              </li>
              <li>
                加关注
              </li>
              <li>
                TA主页
              </li>
              <li>
                <i class="pingb base_i"></i>
                屏蔽
              </li>
              <li>
                <i class="fenx base_i"></i>
                分享
              </li>
            </ul>
            <img src="../../static/img/ad_arr_aa.jpg" alt="" class="cover_arrow" v-on:touchstart.self="cover_arrow">
            <img src="../../static/img/bg_all.png" alt="" class="cover_user_img">
            <p class="user_id">ID:12345678</p>
            <p class="user_name">用户名</p>
          </li>
          <!--校友卡e-->

          <!--限定卡s-->
          <li v-for="item in list" class="xdk_cover" v-show="show_list[1]">
            <img src="../../static/img/bg_all.png" alt="">
          </li>
          <!--限定卡e-->
         <!--热门卡s-->
          <li v-for="item in list" class="xdk_cover" v-show="show_list[2]">
            <img src="../../static/img/bg_all.png" alt="">
          </li>
         <!--热门卡e-->
          <!--辅助卡s-->
          <li v-for="item in list" class="xdk_cover" v-show="show_list[3]">
            <img src="../../static/img/bg_all.png" alt="">
          </li>
          <!--辅助卡e-->

        </ul>

        <div slot="top" class="mint-loadmore-top" >
          <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>
          <span v-show="topStatus === 'loading'">
            <mt-spinner type="snake"></mt-spinner>
          </span>
        </div>
        <div slot="bottom" class="mint-loadmore-bottom">
          <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
          <span v-show="bottomStatus === 'loading'">
            <mt-spinner type="snake"></mt-spinner>
          </span>
        </div>
      </mt-loadmore>
      <!--校友卡-->
      <!--校友卡-->
    </div>

  </div>
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import Tajax from "../common/common_ajax/common_ajax.js";
  //limit_Scroll
  import { Toast, Indicator, MessageBox } from 'mint-ui';
  import qs from 'qs';
  import "../filter/filter.js";
  import Vue from 'vue';
  import common from "../common/common.js";
  import { InfiniteScroll  } from 'mint-ui';
  Vue.use(Tajax);
  export default {
    name: 'ad_user_index',
    data() {
      return {
        show_list:[true,false,false,false,false],
        list: [{},{},{},{},{}],
        allLoaded: false,
        bottomStatus: '',
        wrapperHeight: 0,
        type:"校友卡",
        no:"1",
        size:"11"
      }
    },
    created:function(){
      this.get_data({
        type:this.type,
        no:this.no,
        size:this.size
      }).then((e)=>{

      }).catch((e)=>{

      })
    },
    beforeCreate: function () {

    },
    mounted:function(){
      this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
    },
    methods: {
      cover_arrow:function(e){
          let className = e.target.previousElementSibling.className;
          if(~className.indexOf("hide")){
            e.target.previousElementSibling.className =className.replace(" hide","");
            e.target.previousElementSibling.className += " show";
          }else{
            e.target.previousElementSibling.className =className.replace(" show","");
            e.target.previousElementSibling.className += " hide";
          }
      },
      get_data:function(obj){
       return new Promise((resolve, reject) => {
          let user_id = this.get_user_id();
          Indicator.open();
          this.$tajax({
            url: "/yizhiweimen/api/user/adventurecard/riskcardScreening",
            m: "post",
            data: qs.stringify(
              {
                schoolId: 1,
                type: obj.type,
                pageNo: obj.no,
                pageSize: obj.size,
                uid: user_id
              })
          }).then((e) => {
            Indicator.close();
            console.log('then');
            console.log(e);
            if(e.data.length<10){
              this.allLoaded = true;
            }else{
              this.allLoaded = false;
            }
            resolve(e);


          }).catch((e) => {
            Indicator.close();
            console.log("catch");
            console.log(e);
            reject(e);
          })
        });
      },
      nav_act:function(el){
          let nav_act  = el.target.parentElement.getElementsByClassName("nav_act")[0];
          nav_act.className = nav_act.className.replace("nav_act","");
          el.target.className += "nav_act";
          this.no = 1;
          this.get_data({
            type:el.target.innerText,
            no:this.no,
            size:this.size
          }).then((e)=>{

          }).catch((e)=>{

          })
      },
      handleTopChange(status) {
        this.moveTranslate = 1;
        this.topStatus = status;
      },
      translateChange(translate) {
        const translateNum = +translate;
        this.translate = translateNum.toFixed(2);
        this.moveTranslate = (1 + translateNum / 70).toFixed(2);
      },
      loadTop() {
        this.get_data({
          type:this.type,
          no:this.no,
          size:this.size
        }).then((e)=>{
          this.$refs.loadmore.onTopLoaded();
        }).catch((e)=>{

        })
      },
      handleBottomChange(status) {
        this.bottomStatus = status;
        console.log("status")
        console.log(status);
      },
      loadBottom() {
        this.get_data({
          type:this.type,
          no:this.no,
          size:this.size
        }).then((e)=>{
          this.$refs.loadmore.onBottomLoaded();
        }).catch((e)=>{

        })
      }
  },
    components: {

    }
  }
</script>
<style scrop lang="scss">
@import "./sass/ad_user_idnex.scss";
.mint-loadmore-top{
  span:nth-child(2){
    margin: 0 auto;
    display: block;
    width: tovw(28);
    height: tovw(28);
  }
}


</style>
<style>
  @component-namespace page {
    @component loadmore {
      @descendent desc {
        text-align: center;
        color: #666;
        padding-bottom: 5px;
      &:last-of-type {
         border-bottom: solid 1px #eee;
       }
      }
      @descendent listitem {
        height: 50px;
        line-height: 50px;
        border-bottom: solid 1px #eee;
        text-align: center;
      &:first-child {
         border-top: solid 1px #eee;
       }
      }
      @descendent wrapper {
        overflow: scroll;
      }
      .mint-spinner {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
  @component mint-loadmore-bottom {
    span {
      display: inline-block;
      transition: .2s linear;
      vertical-align: middle;
    @when rotate {
      transform: rotate(180deg);
    }
  }
  }
</style>
